<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习07时钟</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#data{
				width: 150px;
				height: 138px;
				background-image: url(img/cald.png);
			}
			#week{
				font-size: 23px;
				color: #FFFFFF;
				text-align: center;
			}
			#day{
				text-align: center;
				font-size: 60px;
				font-family: "arial black";
				font-weight: bold;
			}
			#clock{
				font-size: 40px;
				font-family: "arial black";
				font-weight: bold;
				color: #FFFFFF;
				width: 180px;
				height: 66px;
				background-image: url(img/clock.png);
				background-repeat: no-repeat;
				padding: 40px 30px;
			}
			
		</style>
	</head>
	<body>
		<!-- 179000516 王德令 -->
		<div id="data">
			<div id="week"></div>
			<div id="day"></div>
		</div>
		<div id="clock">
			<div id="clock2"></div>
		</div>
		<script type="text/javascript">
			// 日历表
			var a = new Array("日", "一", "二", "三", "四", "五", "六");  
			var week = new Date().getDay();  
			var str = "星期"+ a[week];
			document.querySelector("#week").innerHTML = str; 

			var day = new Date().getDate();
			document.querySelector("#day").innerHTML = day;
			
			// 时钟
			function p(s){
				return s < 10 ? '0' + s:s;
			}
			function showtime(){
				var mytime = new Date();
				var h = mytime.getHours();
				var m = mytime.getMinutes();
				var s = mytime.getSeconds();
				var str = `${p(h)}:${p(m)}:${p(s)}`;
				document.querySelector("#clock2").innerHTML = str;
				setTimeout(showtime,1000);
			}
			// 打印时间
			showtime();
		</script>
	</body>
</html>